<script lang="ts" setup name="ConsumableOverview">
import {
  getListByConditionsWithPage,
  getLoginUserInfo,
  ndeMethodNameConvertor,
  urls
} from '@/index';
import type {
  DialogModel,
  NdePersonOperationRecord,
  NdePersonOperationRecordQueryCondition
} from '@/index.d';
import { useRequest } from 'vue-request';
import DetailDialog from './DetailDialog.vue';
const title = '耗材总览';
const queryCondition = reactive<NdePersonOperationRecordQueryCondition>({
  deleted: false,
  change: false,
  currentPage: 1,
  pageSize: 20
});

const resetQueryCondition = () => {
  queryCondition.currentPage = 1;
  queryCondition.pageSize = 20;
  delete queryCondition.method;
  delete queryCondition.username;
  delete queryCondition.year;
  delete queryCondition.startDate;
};

const getNdePersonOperationRecordListWithPagePromise = () => {
  return getListByConditionsWithPage<NdePersonOperationRecord>(
    urls.ndePersonOperationRecord,
    queryCondition
  );
};

const {
  data: getNdePersonOperationRecordListData,
  run: getNdePersonOperationRecordListRun,
  loading: getNdePersonOperationRecordListLoading
} = useRequest(getNdePersonOperationRecordListWithPagePromise);

const handleResetQuery = () => {
  resetQueryCondition();
  getNdePersonOperationRecordListRun();
};

const detailDialogModel = reactive<DialogModel<NdePersonOperationRecord>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

watch(
  () => detailDialogModel.visible,
  (value: boolean) => {
    if (!value && detailDialogModel.change) {
      getNdePersonOperationRecordListRun();
      detailDialogModel.change = false;
    }
  }
);

const currentYear = computed<number>(() => {
  const date = new Date();
  return date.getFullYear();
});

const dateBeforeThreeYears = computed<string>(() => {
  const now = new Date();
  const year = now.getFullYear() - 3;
  const month = now.getMonth() + 1;
  const month1 = month < 10 ? '0' + month : month;
  const date = now.getDate() < 10 ? '0' + now.getDate() : now.getDate();
  return year + '-' + month1 + '-' + date;
});

const queryCurrentYearData = () => {
  delete queryCondition.startDate;
  queryCondition.year = currentYear.value;
  getNdePersonOperationRecordListRun();
};

const queryLatestThreeYearsData = () => {
  delete queryCondition.year;
  queryCondition.startDate = dateBeforeThreeYears.value;
  getNdePersonOperationRecordListRun();
};

const queryMyOperationData = () => {
  queryCondition.username = getLoginUserInfo().loginUserUsername;
  getNdePersonOperationRecordListRun();
};
</script>
<template>
  <HqContainerTable
    :base-url="urls.ndePersonOperationRecord"
    :title="title"
    :loading="getNdePersonOperationRecordListLoading"
    :total="getNdePersonOperationRecordListData?.total"
    :table-data="getNdePersonOperationRecordListData?.records"
    v-model:pageSize="queryCondition.pageSize"
    v-model:current-page="queryCondition.currentPage"
    @handle-query="getNdePersonOperationRecordListRun"
    @handle-reset-query="handleResetQuery"
    @handle-reload="getNdePersonOperationRecordListRun"
    v-model:detail-dialog-model="detailDialogModel"
    :operate-column="true"
  >
    <template #search>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.method"
          clearable
          placeholder="请选择方法"
          @change="getNdePersonOperationRecordListRun"
        >
          <HqNdeMethodOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.username"
          clearable
          placeholder="请选择人员"
          @change="getNdePersonOperationRecordListRun"
        >
          <HqUserOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-input-number
          v-model="queryCondition.year"
          :min="2000"
          :max="currentYear"
          placeholder="请输入查询年份"
          @change="getNdePersonOperationRecordListRun"
        />
      </hq-col>
      <hq-col kind="search">
        <el-date-picker
          v-model="queryCondition.startDate"
          type="date"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          placeholder="请输入最早日期"
          @change="getNdePersonOperationRecordListRun"
        />
      </hq-col>
    </template>
    <template #button>
      <el-button
        type="primary"
        @click="queryCurrentYearData"
        :loading="queryCondition.year !== undefined && queryCondition.year === currentYear"
      >
        查询当年数据
      </el-button>
      <el-button
        type="primary"
        @click="queryLatestThreeYearsData"
        :loading="
          queryCondition.startDate !== undefined &&
          queryCondition.startDate === dateBeforeThreeYears
        "
      >
        查询近3年数据
      </el-button>
      <el-button
        type="primary"
        @click="queryMyOperationData"
        :loading="queryCondition.username === getLoginUserInfo().loginUserUsername"
      >
        查询我的数据
      </el-button>
    </template>
    <template #tableColumns>
      <HqTableColumn label="姓名" prop="user.name" />
      <HqTableColumn label="工号" prop="user.workNo" />
      <el-table-column
        prop="method"
        label="方法"
        :formatter="ndeMethodNameConvertor"
        align="center"
        :min-width="200"
      />
      <HqTableColumn label="操作日期" prop="operationDate" />
      <hq-table-column label="证明文件">
        <template #default="{ row }">
          <el-link
            v-if="row.attachmentUrl"
            :href="row.attachmentUrl"
            target="_blank"
            type="primary"
          >
            {{ row.operationRecordReference }}
          </el-link>
          <el-text v-else> {{ row.operationRecordReference }}</el-text>
        </template>
      </hq-table-column>
    </template>
  </HqContainerTable>
  <DetailDialog v-model:dialog-model="detailDialogModel" v-if="detailDialogModel.visible" />
</template>
<style lang="scss" scoped></style>
